<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<html>
<head>
    <title>我的订单 - 花店商城</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .order-item-img {
            width: 50px;
            height: 50px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/shop">花店商城</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/cart">购物车</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="${pageContext.request.contextPath}/shop/orders">我的订单</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <span class="nav-link">欢迎, ${sessionScope.user.username}</span>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/logout">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2>我的订单</h2>
        
        <c:if test="${empty orders}">
            <div class="alert alert-info">
                还没有订单，快去 <a href="${pageContext.request.contextPath}/shop">购物</a> 吧！
            </div>
        </c:if>
        
        <c:forEach items="${orders}" var="order">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>订单号：${order.id}</span>
                    <div>
                        <span class="me-2">状态：
                            <span class="badge ${order.status == 'pending' ? 'bg-warning' : 
                                               order.status == 'paid' ? 'bg-info' :
                                               order.status == 'shipped' ? 'bg-primary' :
                                               order.status == 'completed' ? 'bg-success' : 'bg-danger'}">
                                ${order.status == 'pending' ? '待付款' :
                                  order.status == 'paid' ? '已付款' :
                                  order.status == 'shipped' ? '已发货' :
                                  order.status == 'completed' ? '已完成' : '已取消'}
                            </span>
                        </span>
                        <c:if test="${order.status == 'pending'}">
                            <button class="btn btn-sm btn-success" onclick="updateStatus(${order.id}, 'paid')">付款</button>
                            <button class="btn btn-sm btn-danger" onclick="updateStatus(${order.id}, 'cancelled')">取消</button>
                        </c:if>
                        <c:if test="${sessionScope.user.role == 'admin' && order.status == 'paid'}">
                            <button class="btn btn-sm btn-primary" onclick="updateStatus(${order.id}, 'shipped')">发货</button>
                        </c:if>
                        <c:if test="${order.status == 'shipped'}">
                            <button class="btn btn-sm btn-success" onclick="updateStatus(${order.id}, 'completed')">确认收货</button>
                        </c:if>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>商品</th>
                                    <th>名称</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>小计</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${order.items}" var="item">
                                    <tr>
                                        <td>
                                            <img src="${item.imageUrl}" class="order-item-img" alt="${item.flowerName}"
                                                 onerror="this.src='https://via.placeholder.com/50x50?text=暂无图片'">
                                        </td>
                                        <td>${item.flowerName}</td>
                                        <td>￥${item.price}</td>
                                        <td>${item.quantity}</td>
                                        <td>￥${item.subtotal}</td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text-end"><strong>总计：</strong></td>
                                    <td><strong>￥${order.totalAmount}</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="text-muted">
                        下单时间：<fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
    function updateStatus(orderId, status) {
        if (!confirm('确定要更新订单状态吗？')) return;
        
        $.post("${pageContext.request.contextPath}/shop/order/status", {
            orderId: orderId,
            status: status
        }, function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert(response.message || "操作失败，请重试");
            }
        });
    }
    </script>
</body>
</html> 